<template>
  <!-- 机关管理 -->
  <section id="partyManage" class="com-con">
     <div class="con-top">
        <el-button type="primary" icon="el-icon-plus" class="f-right">添加</el-button>
    </div>
    <div class="con-bottom">
      <el-table :data="tableData" :row-class-name="getRowClass" @expand-change="getSecondList" stripe style="width: 100%">
        <el-table-column label="" prop="" width="10"></el-table-column><!--仿树结构，改变空格大小，实现错位功能-->
        <el-table-column type="expand">
          <template slot-scope="props">
            <tabSecond :dataList="props.row.children" :level="0"></tabSecond>
          </template>
        </el-table-column>
        <el-table-column prop="name" label="机关名称"></el-table-column>
        <el-table-column prop="isOpen" label="是否启用" width="160">
          <template  slot-scope="scope">
            {{scope.row.isOpen=="1"?"启用":"停用"}}
          </template>
        </el-table-column>
        <el-table-column label="操作" width="180">
          <template slot-scope="scope">
            <el-button type="warning" size="mini">编辑</el-button>
            <el-button type="success" size="mini" @click="showLook(scope.row.id)">查看党员</el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <diaLook :lookData="lookData" v-if="lookData.isShow"></diaLook>
  </section>
</template>

<script>
  import tabSecond from "@component/organManage/common/tabSecond" //二级table
  import diaLook from "@component/organManage/common/diaLookMember" //查看党员
export default {
  name: '',
  msg:"组织管理-机关党建-机关管理",
  data() {
    return {
      lookData:{//查看党员
        isShow:false,
        tabData:[]
      },
      count:1,
      tableData: [
        {
          isOpen: '1',
          name: '财政局财政所',
          id:"01",
          haveChildren:true,
          children:[]
        },
        {
          isOpen: '1',
          name: '财政局',
          id:"02",
          haveChildren:true,
          children:[]
        },
        {
          isOpen: '0',
          name: '畜牧局',
          id:"03",
          haveChildren:false,
          children:[]
        },
        {
          isOpen: '0',
          name: '林业局',
          id:"04",
          haveChildren:true,
          children:[]
        }
      ]
    }
  },
  methods:{
    /*给二级table赋值class名*/
    getRowClass({row, rowIndex}) {
      row.index = rowIndex;
      if (row.haveChildren) {
        return "";
      } else {
        return "hide-expand"
      }
    },
    /*展开二级列表*/
    getSecondList(row, expandedRows) {
      if (!row.haveChildren || (row.haveChildren && row.children.length != 0)) {
        /*没有子列表或者已经读取过子列表的时候，不执行获取数据请求*/
        return;
      }
      this.tableLoading = true;
      var _this = this,
        index = row.index;
      /*给二级列表赋值*/
      let data=[
        {
          isOpen: '1',
          name: this.count+'财政局财政所',
          id:this.count+"01",
          haveChildren:true,
          children:[]
        },
        {
          isOpen: '1',
          name: this.count+'财政局',
          id:this.count+"02",
          haveChildren:true,
          children:[]
        },
        {
          isOpen: '0',
          name: this.count+'畜牧局',
          id:this.count+"03",
          haveChildren:false,
          children:[]
        },
      ]
      this.tableData[index].children = data;

      /*let url = this.apiUrl + "/platformTag/getChildTree";
      let params = {
        platformCode: row.platformCode,
        parentCode: row.id
      };
      this.publicFuction.publicRequest('get', url, params, function (data) {
        _this.getSecondCallback(data, index);
      });*/
    },
    getSecondCallback(response, index) {
      this.tableData[index].children = response.data;
      this.tableLoading = false;
    },
    /*查看党员*/
    showLook(id){
      this.lookData.tabData=[{},{},{}];
      this.lookData.isShow=true;
    }
  },
  components:{
    tabSecond,
    diaLook
  }
}
</script>
<style lang="less">
  #partyManage{
    .el-table {
      font-size: 12px;
      color: #666;
      thead {
        font-size: 12px;
        line-height: 36px;
        color: #999;
        tr, th {
          background: #f0f0f0;
          padding: 0;
        }
      }
      .cell {
        padding-left: 0 !important;
      }
      [class^=el-icon-] {
        font-size: 15px;
        padding: 0 6px;
      }
    }
    .manage-top {
      overflow: hidden;
      padding: 5px 0 20px;
    }
    tr:hover td {
      background-color: #fff !important;
    }
    .second-level {
      &:before {
        height: 0;
      }
      .el-table__header-wrapper {
        display: none;
      }
      .el-table__row:last-child {
        td {
          border-bottom: 0 !important;
        }
      }
    }
    .el-table__expanded-cell[class*=cell] {
      padding: 0;
    }
    .btn-refresh {
      margin-right: 78px
    }
    .hide-expand {
      .el-table__expand-icon {
        cursor: default;
      }
      .el-table__expand-column .el-icon {
        visibility: hidden;
      }
    }
  }
</style>
